<script setup>
	import {
		h,
		ref,
		toRefs,
		defineEmits,
		watch
	} from 'vue'
	import useClipboard from 'vue-clipboard3'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	const {
		toClipboard
	} = useClipboard()

	const props = defineProps({
		show: {
			type: Boolean,
			required: true,
			default: false
		}
	})
	const emits = defineEmits(['update:show'])
	let {
		show
	} = toRefs(props)

	const tableData = ref([{
		id: 1,
		name: '190.vip',
		email: 'test@190.vip',
	}, {
		id: 2,
		name: '190.vip',
		email: 'test@190.vip',
	}, {
		id: 3,
		name: '190.vip',
		email: 'test@190.vip',
	}, {
		id: 4,
		name: '190.vip',
		email: 'test@190.vip',
	}, {
		id: 5,
		name: '190.vip',
		email: 'test@190.vip',
	}, {
		id: 6,
		name: '190.vip',
		email: 'test@190.vip',
	}, {
		id: 7,
		name: '190.vip',
		email: 'test@190.vip',
	}])

	const tableData2 = ref([{
		id: 1,
		name: '190.vip',
		result: '失败原因',
	}, {
		id: 2,
		name: '190.vip',
		result: '失败原因',
	}, {
		id: 3,
		name: '190.vip',
		result: '失败原因',
	}, {
		id: 4,
		name: '190.vip',
		result: '失败原因',
	}, {
		id: 5,
		name: '190.vip',
		result: '失败原因',
	}, {
		id: 6,
		name: '190.vip',
		result: '失败原因',
	}, {
		id: 7,
		result: '失败原因',
	}])

	const active = ref(0)
	const multipleTableRef = ref()
	const multipleSelection = ref([])
	const arr = tableData.value.map(item => item.id)

	const selectable = (row) => !arr.includes(row.id)

	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}
	const copy = async (msg) => {
		try {
			// 复制
			await toClipboard(msg)

			ElMessage({
				message: '复制成功！',
				type: 'success',
			})
			// 复制成功
		} catch (e) {
			ElMessage({
				message: '复制失败！',
				type: 'error',
			})
			// 复制失败
		}
	}


	function touchCopy() {
		var arr = tableData2.value.map(item => item.name)
		var str = arr.join('\n')
		copy(str)
	}
	const addCart = () => {
		emits('update:show', false)
		ElMessageBox({
			title: '',
			customClass: 'custom-message',
			message: h('div', null, [
				h('h4', null, '发送失败'),
				h('p', {
					style: 'color: #999999;margin-bottom:20px;'
				}, '注失败原因'),
			]),
			type: 'error',
			confirmButtonClass: 'custom-confirm',
			confirmButtonText: '返回重试',
		}).then(() => {
			emits('update:show', true)
		})
	}

	const switchTab = (id) => {
		active.value = id
		if (id == 0) {
			tableData.value.forEach(item => {
				setTimeout(() => {
					multipleTableRef.value.toggleRowSelection(item, true)
				});
			})
		}
	}

	const handleClose = () => {
		emits('update:show', false)
	}

	watch(show, (val) => {
		tableData.value.forEach(item => {
			setTimeout(() => {
				multipleTableRef.value.toggleRowSelection(item, true)
			})
		})
	})
</script>
<template>
	<div>
		<el-dialog :modelValue="show" width="540" @close="handleClose">
			<template #header>
				<div class="dialog-header">
					<span class="dialog-title">转出域名</span>
					<span>获取转移密码</span>
				</div>
			</template>
			<div class="domains-table">
				<div class="table-tool">
					<div class="table-tool__left">
						<el-button :class="{'active':active == 0}" @click="switchTab(0)">提交成功（15）</el-button>
						<el-button :class="{'active':active == 1}" @click="switchTab(1)">提交失败（7）</el-button>
					</div>
					<div class="table-tool__right">
						<el-link @click="touchCopy">将提交失败的域名复制到剪贴板</el-link>
					</div>
				</div>
				<div v-if="active == 0">
					<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
						height="285" style="width: 100%" show-overflow-tooltip>
						<el-table-column type="selection" label="全选" width="50"></el-table-column>
						<el-table-column prop="name" label="域名">
						</el-table-column>
						<el-table-column prop="email" label="whois邮箱">
						</el-table-column>
					</el-table>
				</div>
				<div v-if="active == 1">
					<el-table ref="multipleTableRef2" :data="tableData2" height="285" style="width: 100%"
						show-overflow-tooltip>
						<el-table-column type="selection" :selectable="selectable" label="全选"
							width="50"></el-table-column>
						<el-table-column prop="name" label="域名">
						</el-table-column>
						<el-table-column prop="result" label="失败原因">
						</el-table-column>
					</el-table>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="warning" @click="addCart">
						发送转移密码
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>


<style scoped lang="scss">
	.table-tool__left .el-button.active {
		background-color: #F68A0C;
		border-color: #F68A0C;
		color: #fff;
	}
</style>